<template>
  <Layout :tabId="2">
    <template #content>
      <view
        class="w-[95%] m-auto"
        :style="`padding-top: ${safeareaTop <= 60 ? safeareaTop + 130 : safeareaTop}rpx`"
      >
        <view class="text-f text-[40rpx] font-black"> 投诉 </view>
        <view
          class="text-f bg-[#fff] shadow-[0_0_10rpx_rgba(0,0,0,0.1)] rounded-[15rpx] mt-6"
        >
          <view
            class="w-[90%] flex items-center justify-start my-2 py-[20rpx] px-[20rpx]"
          >
            <view class="flex items-center" @click="toAddComplaint">
              <image
                class="w-[80rpx] h-[80rpx] rounded-[50%]"
                src="https://youke1.picui.cn/s1/2025/09/23/68d213ce3793e.jpg"
                mode="scaleToFill"
              />
              <text class="text-f text-[24rpx] ml-2 text-[#999]">
                编写投诉...
              </text>
            </view>
          </view>
        </view>
        <view
          class="w-[98%] m-auto flex flex-col items-center justify-start my-2 py-[40rpx] pb-[140rpx]"
          v-if="complaintLis.length != 0"
        >
          <view
            class="w-[100%] bg-[#fff] shadow-[0_0_10rpx_rgba(0,0,0,0.1)] rounded-[15rpx] mb-2 py-[20rpx] px-[10rpx]"
            v-for="item in complaintLis"
            :key="item.id"
          >
            <view class="w-[90%] flex items-start">
              <image
                class="w-[80rpx] h-[80rpx] rounded-[50%] ml-[15rpx]"
                src="https://youke1.picui.cn/s1/2025/09/23/68d213ce3793e.jpg"
                mode="scaleToFill"
              />
              <view
                class="flex flex-col items-start justify-center text-f ml-[15rpx]"
              >
                <text class="text-[30rpx] font-blod">张三</text>
                <text class="text-[24rpx] text-[#999] mt-1">9月20日 15:00</text>
              </view>
            </view>
            <view class="w-[100%] p-1">
              <text class="text-[24rpx] text-[#333]">{{ item?.content }}</text>
            </view>
            <view
              class="w-[100%] flex items-center justify-start"
              v-if="item?.images.length != 0"
            >
              <view class="w-[100%] flex items-center justify-between">
                <view
                  class="w-[100%] h-[200rpx]"
                  v-for="(url, index) in item.images.split(',')"
                  :key="index"
                >
                  <image
                    class="w-[99%] h-[200rpx] rounded"
                    :src="url"
                    mode="scaleToFill"
                  />
                </view>
              </view>
            </view>
            <view class="mt-1 w-[100%] flex items-center justify-start">
              <view
                class="text-[#999] flex items-center"
                @click="onHandleVote(item, 0)"
              >
                <wd-icon name="thumb-up" color="#999" size="20px"></wd-icon>
                <text class="text-f text-[24rpx] ml-1">{{
                  item?.upvotes
                }}</text>
              </view>
              <view
                class="ml-2 text-[#999] flex items-center"
                @click="onHandleVote(item, 1)"
              >
                <wd-icon name="thumb-down" color="#999" size="20px"></wd-icon>
                <text class="text-f text-[24rpx] ml-1">{{
                  item?.downvotes
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </Layout>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getComplaintList, editComplaint } from '@/api/complaint'
import Layout from '@/components/Layout/tabLayout.vue'
import useStore from '@/store'
const store = useStore()

const safeareaTop = computed(() => {
  return store.useSafeArea.getSafeAreaTop
})

const complaintLis = ref<Complaint[]>([])

const toAddComplaint = () => {
  uni.navigateTo({
    url: '/pages/complaint/complaintAdd'
  })
}

const onHandleVote = async (item: any, type: number) => {
  if (type == 0) {
    const res = await editComplaint<{
      id: number
      upvotes: number
    }>({
      id: item.id,
      upvotes: item.upvotes + 1
    })
    if (res.code == 200) {
      item.upvotes++
    }
  } else {
    const res = await editComplaint<{
      id: number
      downvotes: number
    }>({
      id: item.id,
      downvotes: item.downvotes + 1
    })
    if (res.code == 200) {
      item.downvotes++
    }
  }
}

onMounted(async () => {
  const res = await getComplaintList<IPaginationParams, Complaint>({
    page: 1,
    pageSize: 10
  })
  if (res.code == 200) {
    complaintLis.value = res.data.items
  }
})
</script>

<style></style>
